<template>
  <div class="wrapper">
    <el-container>
      <el-header class="header" height="130px">
        <h2>数字档案管理系统</h2>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <div class="person-info">
            <div class="person-header">个人信息</div>
            <div class="content">
              <div class="avatar-wrap">
                <div class="avatar">
                  <img src="" alt="" />
                </div>
                <span>admin</span>
              </div>
              <div class="info">
                <div class="detail">
                  <span>手机号码</span>
                  <span>18444444444</span>
                </div>
                <div class="detail">
                  <span>用户邮箱</span>
                  <span>yousuck@163.com</span>
                </div>
                <div class="detail">
                  <span>用户邮箱</span>
                  <span>yousuck@163.com</span>
                </div>
                <div class="detail">
                  <span>用户邮箱</span>
                  <span>yousuck@163.com</span>
                </div>
              </div>
            </div>
          </div>
          <div class="menu-wrapper">
            <div class="menu">
              <img src="@/assets/image/triangle.png" alt="" />
              <div>基础信息管理平台</div>
            </div>
            <div class="menu">
              <img src="@/assets/image/transfer.png" alt="" />
              <div>档案接收整理管理系统</div>
            </div>
            <div class="menu">
              <img src="@/assets/image/cycle.png" alt="" />
              <div>档案共享利用系统</div>
            </div>
            <div class="menu">
              <img src="@/assets/image/lock.png" alt="" />
              <div>档案保管系统</div>
            </div>
            <div class="menu">
              <img src="@/assets/image/data.png" alt="" />
              <div>大数据统计分析平台</div>
            </div>
            <div class="menu">
              <img src="@/assets/image/stream.png" alt="" />
              <div>数字化成品检测及质量控制系统</div>
            </div>
          </div>
        </el-aside>
        <el-main>
            <div class="notify-wrap">
              <div class="notify-box">
                    <svg-icon icon-class="volume" class="icon"/>
                    <div>
                      <div class="text">待阅消息</div>
                      <div class="quantity">167</div>
                    </div>
                </div>
              <div class="notify-box">
                    <svg-icon icon-class="todo" class="icon"/>
                    <div>
                      <div class="text">已办事项</div>
                      <div class="quantity">73</div>
                    </div>
                </div>
              <div class="notify-box">
                    <svg-icon icon-class="board" class="icon"/>
                    <div>
                      <div class="text">通知公告</div>
                      <div class="quantity">13</div>
                    </div>
                </div>
                <div class="notify-box">
                    <svg-icon icon-class="bell" class="icon"/>
                    <div>
                      <div class="text">待阅消息</div>
                      <div class="quantity">148</div>
                    </div>
                </div>
            </div>
            <div class="graph-line">
              <line-chart :chart-data="lineChartData" />
            </div>
            <div class="graphs">
              <div class="graph">
                <raddar-chart />
              </div>
              <div class="graph">
                <pie-chart />
              </div>
              <div class="graph">
                <bar-chart />
              </div>
            </div>
        </el-main>
      </el-container>
    </el-container>
    <div class="corner-fix">
      
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  components: {
    PanelGroup, LineChart, RaddarChart, PieChart, BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  position: relative;
  padding: 0 40px;
  .header {
    padding: 0;
    h2 {
      font-size: 60px;
      letter-spacing: 5px;
      font-weight: 400;
      margin: 0;
      margin-top: 20px;
    }
  }
  .el-aside {
    padding: 0;
    background: transparent;
  }
  .person-info {
    background-color: rgb(231, 231, 231);
    color: rgb(151, 151, 151);
    border-radius: 25px;
    padding-bottom: 50px;
    .person-header {
      padding: 6px 20px;
      border-bottom: 1px solid rgb(207, 207, 207);
      font-size: 15px;
    }
    .content {
      .avatar-wrap {
        width: 50px;
        margin: 15px auto;
        text-align: center;
        .avatar {
          height: 50px;
          overflow: hidden;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            background-color: pink;
          }
        }
      }
      .info {
        padding: 0 20px;
        .detail {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        }
      }
    }
  }
  .menu-wrapper {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: center;
        .menu {
            width: 40%;
            margin-bottom: 40px;
            img {
                width: 50px;
                height: 50px;
            }
            div {
              width: 75%;
              margin: 0 auto;
              line-height: 20px;
            }
        }
    }
    .el-main {
        padding: 0 20px;
    }
    .notify-wrap {
        display: flex;
        justify-content: space-between;
        .notify-box {
            box-sizing: border-box;
            width: 170px;
            height: 60px;
            background-color: rgb(231,231,231);
            border-radius: 20px;
            padding: 10px 20px 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            font-size: 13px;
            .icon {
              width: 30px;
              height: 24px;
            }
            .text {
              margin-bottom: 5px;
            }
            img {
                width: 35px;
                height: 35px;
                background: green;
            }
        }
    }
    .graph-line {
      height: 400px;
      margin-top: 20px;
    }
    .graphs {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
      .graph {
        width: 240px;
        height: 240px;
      }
    }
    .corner-fix {
      position: absolute;
      top: 0;
      right: 0;
    }
}
</style>